<template>
    <div>
        <el-dialog :visible.sync="visible" width="80%" center :before-close="handleClose" append-to-body
            :title="'请选择课件'">
            <el-row>
                <el-form :inline="true" ref="form" :model="form" label-width="66px" class="demo-form-inline" clo>

                    <el-form-item label="" prop="type">
                        <el-select size="mini" v-model="form.is_folder" placeholder="筛选课件展示形式" filterable clearable>
                            <el-option v-for="item in file_types" :key="item.is_folder" :label="item.name"
                                :value="item.is_folder">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" prop="book_type">
                        <el-select size="mini" v-model="form.book_type" placeholder="筛选课件分类" filterable clearable>
                            <el-option v-for="item in book_types" :key="item.book_type" :label="item.book_name"
                                :value="item.book_type">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="title">
                        <el-input size="mini" placeholder="输入教材/课件名称" v-model="form.title" clearable></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="search" size="mini">筛选</el-button>
                        <el-button v-if="folder_history.length" type="default" @click="back" size="mini">返回</el-button>

                        <span style="color: red;font-size: 20px;" v-if="task_type > 0">
                            (鼠标单击选中课件,若为集合类课件,则双击可进入选中具体内容)
                        </span>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row v-loading="loading">
                <el-row>
                    <div>
                        <div class="content">
                            <div v-for="item in tableData" :key="item.id">
                                <div class="content__item" v-if="item.is_folder == 1" @click="folderDetail(item.id)">
                                    <img class="content__item-cover" src="@/assets/img/kanke/courseware/folder.png"
                                        alt="暂无图片">
                                    <p class="title">
                                        {{ item.title }}
                                    </p>
                                </div>
                                <!--  文件 -->
                                <div class="content__item" @click="selectFiles(item)" v-else>
                                    <img class="content__item-cover" :src="item.cover_url" alt="暂无图片">

                                    <el-tag effect="dark" size="small" style="top:0;position: absolute;left: 0;"
                                        :type="getType(item)">{{
                                            getItemTag(item)
                                        }}</el-tag>
                                    <el-tag v-if="item.is_multiple == 2" type="primary" size="small"
                                        style="top:0;position: absolute;right: 0;">集合
                                    </el-tag>
                                    <el-tag v-else type="primary" size="small"
                                        style="top:0;position: absolute;right: 0;">单一
                                    </el-tag>

                                    <label class="checkbox_label" :fileId="item.id"
                                        v-if="multipleSelectionIdArr.includes(String(item.id)) || multipleSelectionIdArr.includes(item.id)">
                                        <img src="@/assets/img/kanke/courseware/select.png" alt="暂无图片"
                                            style="width: 30px;height: 30px;">
                                    </label>
                                    <p class="title">
                                        {{ item.title }}
                                    </p>
                                </div>
                            </div>

                        </div>
                    </div>
                </el-row>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="pageInfo.pageNumber" :page-sizes="pageSizes" :page-size="pageInfo.pageSize"
                        background layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
                    </el-pagination>
                </div>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose" size="small">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { pageSizes } from '@/constant/index.js'
import { getList } from "@/api/kanke/textbook/coursewarepub";
import { COURSEWARE_TYPE_MAP, COURSEWARE_TYPE_COLOR_MAP } from '@/constant/kanke/courseware';

export default {
    name: "SelectMaterial",
    components: {
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        folder_id: {
            //type: Number,
            default: 0
        },
        edit_task_courseware_arr: {
            type: Array,
            default: () => []
        },
        select_type: {
            type: Array,
            default: () => []
        },
        book_select: {
            type: [Number, String],
            default: 0
        }
    },
    data() {
        return {
            loading: false,
            form: {
                book_type: '',
                is_folder: '',
                title: '',
            },
            pageInfo: {
                pageNumber: 1,
                pageSize: 10,
                total: 0
            },
            file_types: [
                { 'is_folder': 1, 'name': '文件夹' },
                { 'is_folder': 0, 'name': '课件' }
            ],
            book_types: [
                { 'book_type': 1, 'book_name': '课本' },
                { 'book_type': 2, 'book_name': '视频' },
                { 'book_type': 3, 'book_name': 'PPT' },
                { 'book_type': 4, 'book_name': '音频' },
            ],
            multipleSelection: [],  //多选内容
            multipleSelectionIdArr: [],  //多选id

            tableData: [],
            type: 'book',
            pageSizes,
            parent_id: 0,
            folder_history: [0]
        }
    },

    mounted() {
        this.init();
    },
    watch: {
        edit_task_courseware_arr: {
            handler(val) {
                if (val.length) {
                    this.multipleSelection = [...val]
                    this.multipleSelectionIdArr = val.map(item => item.id)
                }
            },
            immediate: true
        },
    },
    methods: {
        async init() {
            const params = {
                parent_id: this.parent_id,
                book_select: this.book_select,
                ...this.form,
                ...this.pageInfo
            };
            this.loading = true;

            await getList(params).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.data
                    // 找到
                    this.pageInfo.total = res.data.total
                }
                this.loading = false
            })
        },
        getType({ book_type }) {
            return COURSEWARE_TYPE_COLOR_MAP[book_type] || '未知'
        },
        getItemTag({ book_type }) {
            return COURSEWARE_TYPE_MAP[book_type] || '未知'
        },
        back() {
            let folder_id = this.folder_history.pop()
            if (this.parent_id == folder_id && this.folder_history.length > 0) {
                folder_id = this.folder_history.pop()
            }
            this.parent_id = folder_id
            this.init()
        },
        search() {
            this.pageInfo.pageNumber = 1;
            this.init();
        },
        reloadInit() {
            this.init();
        },
        folderDetail(parent_id) {
            this.parent_id = parent_id
            if (this.folder_history.length == 0) {
                this.folder_history.push(0)
            }
            this.folder_history.push(parent_id)
            this.init()
        },

        //选中文件逻辑
        selectFiles(obj) {
            if (!this.select_type.includes(obj.book_type)) {
                this.$message.error('请选择正确的课件类型!')
                return;
            }
            // 判断如果存在就取消
            if (this.multipleSelectionIdArr.includes(String(obj.id)) || this.multipleSelectionIdArr.includes(obj.id)) {
                this.multipleSelection = [...this.multipleSelection.filter(item => item.id != obj.id)]
                this.multipleSelectionIdArr = [...this.multipleSelectionIdArr.filter(item => item != obj.id)]
                return;
            }

            this.multipleSelection = [...this.multipleSelection, obj]
            this.multipleSelectionIdArr = [...this.multipleSelectionIdArr, obj.id]

        },
        handleClose() {
            this.$emit('update:visible', false);
        },
        submitForm() {
            //判断是否为布置任务选择
            this.$emit('handleSelectFiles', this.multipleSelection);
            this.$emit('update:visible', false);
            this.multipleSelection = [];
            this.multipleSelectionIdArr = [];
        },

        handleSizeChange(val) {
            this.pageInfo.pageSize = val
            this.init()
        },
        handleCurrentChange(val) {
            this.pageInfo.pageNumber = val
            this.init()
        }
    }
}
</script>
<style lang="scss" scoped>
@import "@/styles/abstract/mixins.scss";

.demo-form-inline {
    ::v-deep .el-select .el-input {
        width: 150px;
    }
}

::v-deep .el-alert {
    border-radius: 0;
}

.checkbox_label {
    position: absolute;
    bottom: 0;
    right: 0;
    // 居中显示
    display: block;
    border-radius: 10px;
    overflow: hidden;

}



::v-deep .el-dialog__header {
    background: #03A7EF;
}

.content {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    margin-bottom: 15px;
    min-height: 450px;

    &__item {
        // display: flex;
        // flex-direction: column;
        // align-items: center;
        // justify-content: center;
        // margin: 20px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 20px;
        padding: 25px 10px 10px;
        border: 1px solid #ccc;
        border-radius: 5px;

        .title {
            width: 140px;
            max-height: 48px;
            line-height: 16px;
            margin: 10px 0;
            word-break: break-word;
            white-space: normal;
            @include line-clamp(3);
        }

        &-cover {
            border: 1px solid #ccc;
            width: 160px;
            height: 150px;
            border-radius: 10px;
        }
    }
}
</style>